[DataGrid] Allow to customize GridToolbarExport's CSV export #1695

michallukowski · 2021-05-18T13:09:40Z

This feature allows to:
- set the file name
- set flag utf8WithBom to generate csv file as UTF-8 with BOM

It may be extended with further options in the future

Example how to use:

import { GridToolbarExport, GridExportCsvOptions } from '@material-ui/data-grid';

<GridToolbarExport
  csvOptions={{
    fileName: 'csvWithBom',
    utf8WithBom: true,
  } as GridExportCsvOptions}
/>

It generate file "csvWithBom.csv" with sequence of bytes (0xEF, 0xBB, 0xBF) at the beginning.

One iteration on #1440

packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx

packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts

packages/grid/_modules_/grid/models/gridExport.ts

packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx

dtassone · 2021-05-20T09:38:06Z

packages/grid/_modules_/grid/utils/exportAs.ts

@@ -12,7 +12,7 @@ import { GridExportFormat } from '../models/gridExport';
 */
 export function exportAs(
  blob: Blob,
-  extension: GridExportFormat = 'csv',
+  extension: GridExportFormatExtension = 'csv',
  filename: string = document.title,


We could change the default filename to include the date.
something like export-21.05.2021-19:21.csv?

@dtassone This sounds off-topic to the PR, but we could create a new issue for it 👍

packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx

packages/grid/_modules_/grid/models/gridExport.ts

packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx

packages/grid/_modules_/grid/models/gridExport.ts

packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts

packages/grid/_modules_/grid/models/gridExport.ts

packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx

packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx

packages/grid/_modules_/grid/models/gridExport.ts

…mui#1440 This feature allows to: - set the file name - set flag utf8WithBom to generate csv file as UTF-8 with BOM It may be extended with further options in the future

I have pushed changes to match what the overall feedback direction seems to be

packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts

packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx

packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx

packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts

Co-authored-by: Matheus Wichman <matheushw@outlook.com>

packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx

dtassone · 2021-06-01T14:04:16Z

packages/grid/_modules_/grid/models/gridExport.ts

-export type GridExportFormat = 'csv';
+export interface GridExportCsvOptions {
+  fileName?: string;
+  utf8WithBom?: boolean;


do we need the withBom suffix? I don't think it brings any value

@dtassone How will a developer differentiate if he's going to include a BOM or not?

what they want is UTF8, the BOM part is just for the reader...

What's the default format? UTF8? Are developers using any other format?

Not sure actually, I thought it was ASCII and we were missing the special characters.

@michallukowski How about we start without, only an option to customize the filename?

Suggested change

utf8WithBom?: boolean;

The main reason for this pull request was to add an option for developers to set a flag if they wanted to add a BOM for a utf-8 encoded file as mentioned in #1440. The filename setting came up by the way. What's the problem with the utf8WithBom option? If you really don't want this option, we can remove it.

Yes, I think we can default to utf8 with Bom, and either remove or reverse the prop so only users that don't want BOM for a special reason would actually set it.

I don't think it's a good idea to add a BOM by default. According to the Unicode Standard:

Use of a BOM is neither required nor recommended for UTF-8, but may be encountered in contexts where UTF-8 data is converted from other encoding forms that use a BOM or where the BOM is used as a UTF-8 signature

https://en.wikipedia.org/wiki/Byte_order_mark

More context: ag-grid/ag-grid#3916

dtassone · 2021-06-07T10:31:55Z

packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx

+  formatOptions?: GridExportCsvOptions;
+}
+
+type GridExportFormatOption = GridExportFormatCsv;


Why do we need these 2 types, why not only 1?
Not sure everybody would agree but I would export the type used in the props, so users can easily type the component props.

why not only 1?

I assume that because as soon as we have excel, it needs:

Suggested change

type GridExportFormatOption = GridExportFormatCsv;

type GridExportFormatOption = GridExportFormatCsv | GridExportFormatExcel;

Not sure everybody would agree but I would export the type used in the props, so users can easily type the component props.

Why would a developer ever care about them? Isn't this type completely internal to the component, with no public API implications? I mean, it seems completely dependent on how GridToolbarExport is written.

If you export the button to recompose your toolbar and you allow to pass props in the button, you might want to type those props and what's inside them

If you export the button to recompose your toolbar and you allow to pass props in the button, you might want to type those props and what's inside them

Then I don't understand your previous comment. The GridToolbarExportProps type is already public for this use case.

You can use https://codesandbox.io/s/material-demo-forked-o7cee?file=/demo.tsx to provide an example if you were thinking of something else, it uses the last commit of this PR.

oliviertassinari · 2021-06-07T20:16:45Z

The PR wasn't rebased, it broke master, I pushed a new commit, fixed:

m4theushw reviewed May 19, 2021

View reviewed changes

m4theushw changed the title ~~[DataGrid] Add optional exportConfiguration props to GridToolbarExport issue:#1440~~ [DataGrid] Add an exportConfiguration prop to GridToolbarExport May 19, 2021

oliviertassinari added the component: data grid This is the name of the generic UI component, not the React module! label May 20, 2021

dtassone reviewed May 20, 2021

View reviewed changes

oliviertassinari reviewed May 20, 2021

View reviewed changes

oliviertassinari added the new feature New feature or request label May 20, 2021

oliviertassinari previously requested changes May 22, 2021

View reviewed changes

packages/grid/_modules_/grid/models/gridExport.ts Outdated Show resolved Hide resolved

packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts Outdated Show resolved Hide resolved

oliviertassinari reviewed May 22, 2021

View reviewed changes

packages/grid/_modules_/grid/models/gridExport.ts Outdated Show resolved Hide resolved

dtassone reviewed May 26, 2021

View reviewed changes

packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx Outdated Show resolved Hide resolved

dtassone reviewed May 26, 2021

View reviewed changes

packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx Outdated Show resolved Hide resolved

dtassone reviewed May 26, 2021

View reviewed changes

packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx Show resolved Hide resolved

dtassone reviewed May 26, 2021

View reviewed changes

packages/grid/_modules_/grid/models/gridExport.ts Outdated Show resolved Hide resolved

oliviertassinari self-assigned this May 31, 2021

michallukowski added 2 commits May 31, 2021 18:45

[DataGrid] Add optional exportConfiguration props to GridToolbarExport …

8a23eba

…mui#1440 This feature allows to: - set the file name - set flag utf8WithBom to generate csv file as UTF-8 with BOM It may be extended with further options in the future

Changes after review

a248e6c

oliviertassinari force-pushed the my-grid-toolbar-export-options branch 7 times, most recently from d4c40b4 to 16cb13b Compare May 31, 2021 16:58

convention

49cfcf0

oliviertassinari force-pushed the my-grid-toolbar-export-options branch from 16cb13b to 49cfcf0 Compare May 31, 2021 16:59

oliviertassinari removed their assignment May 31, 2021

oliviertassinari requested review from dtassone and m4theushw May 31, 2021 17:03

oliviertassinari changed the title ~~[DataGrid] Add an exportConfiguration prop to GridToolbarExport~~ [DataGrid] Allow to customize GridToolbarExport's CSV export May 31, 2021

m4theushw reviewed May 31, 2021

View reviewed changes

Polish

a463098

Co-authored-by: Matheus Wichman <matheushw@outlook.com>

oliviertassinari approved these changes May 31, 2021

View reviewed changes

michallukowski commented Jun 1, 2021

View reviewed changes

packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx Show resolved Hide resolved

dtassone reviewed Jun 1, 2021

View reviewed changes

m4theushw mentioned this pull request Jun 2, 2021

[DataGrid] valueGetter does not apply to CSV export #1814

Closed

2 tasks

rerun ci

3c565f1

oliviertassinari requested review from dtassone and m4theushw June 4, 2021 23:52

dtassone reviewed Jun 7, 2021

View reviewed changes

m4theushw approved these changes Jun 7, 2021

View reviewed changes

m4theushw merged commit e9465da into mui:master Jun 7, 2021

michallukowski deleted the my-grid-toolbar-export-options branch June 7, 2021 13:37

oliviertassinari mentioned this pull request Jun 7, 2021

[DataGrid] Customize separator in CSV export #1440

Closed

michallukowski mentioned this pull request Jul 2, 2021

Typescript type error in component GridToolbarExport after update to @material-ui/data-grid 4.0.0-alpha.32 #2000

Closed

2 tasks

cherniavskii mentioned this pull request Aug 25, 2022

Export to csv with cyrillic data causes unicode issue #5877

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Allow to customize GridToolbarExport's CSV export #1695

[DataGrid] Allow to customize GridToolbarExport's CSV export #1695

michallukowski commented May 18, 2021 •

edited by oliviertassinari

Loading

dtassone May 20, 2021

oliviertassinari May 31, 2021

dtassone Jun 1, 2021

oliviertassinari Jun 1, 2021 •

edited

Loading

dtassone Jun 1, 2021 •

edited

Loading

oliviertassinari Jun 1, 2021 •

edited

Loading

dtassone Jun 1, 2021

oliviertassinari Jun 1, 2021 •

edited

Loading

michallukowski Jun 2, 2021

dtassone Jun 2, 2021

michallukowski Jun 2, 2021 •

edited

Loading

oliviertassinari Jun 2, 2021

dtassone Jun 7, 2021

oliviertassinari Jun 7, 2021 •

edited

Loading

dtassone Jun 7, 2021

oliviertassinari Jun 7, 2021 •

edited

Loading

oliviertassinari commented Jun 7, 2021

	type GridExportFormatOption = GridExportFormatCsv;
	type GridExportFormatOption = GridExportFormatCsv \| GridExportFormatExcel;

[DataGrid] Allow to customize GridToolbarExport's CSV export #1695

[DataGrid] Allow to customize GridToolbarExport's CSV export #1695

Conversation

michallukowski commented May 18, 2021 • edited by oliviertassinari Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Jun 1, 2021 • edited Loading

Choose a reason for hiding this comment

dtassone Jun 1, 2021 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Jun 1, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Jun 1, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michallukowski Jun 2, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Jun 7, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Jun 7, 2021 • edited Loading

Choose a reason for hiding this comment

oliviertassinari commented Jun 7, 2021

michallukowski commented May 18, 2021 •

edited by oliviertassinari

Loading

oliviertassinari Jun 1, 2021 •

edited

Loading

dtassone Jun 1, 2021 •

edited

Loading

oliviertassinari Jun 1, 2021 •

edited

Loading

oliviertassinari Jun 1, 2021 •

edited

Loading

michallukowski Jun 2, 2021 •

edited

Loading

oliviertassinari Jun 7, 2021 •

edited

Loading

oliviertassinari Jun 7, 2021 •

edited

Loading